iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 12
1
Modern Web

好 Js 不學嗎 !? JavaScript 入門中的入門。系列 第 12

[Day12] JavaScript - 非同步與事件循環

  • 分享至 

  • xImage
  •  

大綱

  • 認識同步與非同步
  • 非同步控制流程

認識同步與非同步:同步與非同步的概念
JavaScript 是單執行緒 (single threaded runtime),程式碼由上到下、一行一行依序執行,當遇到函式呼叫,JS 引擎就會建構新的執行環境並放入堆疊 (stack) 裡,同樣一次只處理一件事情 (one thing at a time),在堆疊頂端的執行環境會先處理 (LIFO,Last in First Out),當函式執行好並返回 (return) 之後,執行環境就會被移除,例如底下程式先呼叫 funcA(),funcA() 裡面又呼叫 funcB(),JS 引擎執行完 funcB() 並將結果 return 就會將 funcB() 從 stack 裡移除 (pop off),繼續執行 funcA()。

function funcB(a, b) {
  return a * b
}

function funcA(x)  {
  let Bvalue = funcB(x, x)
  console.log(Bvalue)
}

如果某一段 JS 程式需要很長的執行時間,瀏覽器就會停滯 (freezing) 呈現『假死』狀態,稱為阻塞 (blocking),使用者就無法再進行任何操作,只能傻傻地等待處理完成,如果改用非同步呼叫就能減少阻塞狀況,降低使用者等待的時間,提升操作的流暢度。

同步與非同步很容易混肴兩者的意思,請看以下說明:

  • 同步 (Synchronous,簡稱 Sync):程式必須等待對方回應之後才能繼續往下執行,例如 A1 呼叫了 B1,必須等到 B1 回應才會繼續執行 A2。通常會使用同步表示 A 的程序與 B 息息相關。
  • 非同步 (Asynchronous,簡稱 Async):程式不必等待對方回應就繼續往下執行,例如 A1 呼叫了 B1,不需要管 B1 就可以繼續往下執行 A2。由此可知,會使用非同步表示 A 與 B 並沒有直接的關係。

認識同步與非同步:定時器 - setTimeout() 與 setInterval()
當我們希望程式能夠在指定的時間執行,通常會使用到瀏覽器的 Web API - setTimeout() 與 setInterval(),兩者的差別在於 setTimeout() 一個只會執行一次,setInterval() 會重複執行。

setTimeout():
setTimeout() 在指定的延遲時間到時,會執行一個函式或程式碼,格式如下。
var timeOutID = scope.setTimeout(function[, delay, param1, param2, ...]);

scope 在瀏覽器通常是 window,可以省略不寫,setTimeout() 的返回值是定時器的編號,利用 clearTimeout(timeOutID) 敘述就可以取消這個定時器。
function:延遲時間到時要執行的函式 (回呼函式)
delay:延遲時間,單位:毫秒 (1 秒等於 1000 毫秒),如果省略 delay 參數,delay 會為 0,表示立刻執行函式
param:附加參數,指定延遲時間到會將這些附加參數傳遞給 function

setInterval():
setTimeout() 通常用於只執行一次的場合, setInterval() 會重複執行,其格式如下。
var timeOutID = scope.setInterval(function[, delay, param1, param2, ...]);

scope 在瀏覽器通常是 window,可以省略不寫,setInterval() 的返回值是定時器的編號,利用 clearInterval(timeOutID) 敘述就可以取消這個定時器。
function:延遲時間到時要執行的函式
delay:延遲時間,單位:毫秒 (1 秒等於 1000 毫秒),如果省略 delay 參數,delay 會為 0,表示立刻執行函式
param:附加參數,指定延遲時間到會將這些附加參數傳遞給 function

認識同步與非同步:事件循環 (event loop)
以下待寫....加班很忙...


上一篇
[Day11] JavaScript - RegExp 物件
下一篇
[Day13] JavaScript - JavaScript 與 HTML DOM (上)
系列文
好 Js 不學嗎 !? JavaScript 入門中的入門。30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言